// 变量定义
$color: #5fc0cd;
$bg: background;

@mixin half {
	top: 50%;
	transform: translateY(-50%);
}
@mixin bg($name, $size, $w, $h ,$suffix: png){
    background: url(../imgs/#{$name}.#{$suffix}) no-repeat;
    background-size: $size;
    width: $w;
    height: $h;
}
@mixin icon($top){
	content: " ";
	display: inline-block;
	#{$bg}: url(../imgs/icon.png) no-repeat -5px $top;
	#{$bg}-size: 0.4rem;
	width: 0.22rem;
	height: 0.22rem;
	vertical-align: middle;
}

html {
	font-size: 625%;
    
}

body, button, ul, li, img, header, main, footer {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 0.16rem;
}
a {
	text-decoration: none;
	color: #999;
}
.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
header {
	#{$bg}: $color;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 0.5rem;
}
	.tabs {
		line-height: 0.5rem;
		text-align: center;
		button {
			padding: 0;
			width: 0.8rem;
			height: 0.35rem;
			border-radius: 0.05rem;
			font-size: 0.16rem; 
			outline: none;
			border: 0;
		}
		.btn-one {
			#{$bg}: #55a8b3;
			color: #fff;
			margin-right: -0.1rem;
		}
		.btn-two {
			#{$bg}: #fff;
			color: $color;
		}
	}
	.location {
		@include half;
		position: absolute;
		right: 3%;
	}
	.location img {
		width: 0.25rem;
	}
main {
	position: absolute;
	width: 100%;
	top: 1rem;
	bottom: 0.55rem;
	overflow-x: hidden;
	overflow-y: auto;
}
	.class-list {
		position: fixed;
		width: 100%;
		top: 0.5rem;
		line-height: 0.4rem;
		border-bottom: 1px solid #e2eaec;
		#{$bg}: #fff;
		z-index: 1;
		.class-item {
			width: 33.3%;
			height: 0.4rem;
			outline: none;
			border: none;
			color: #999;
			float: left;
			padding-left: 15vw;
			border-right: 1px solid #e1e5e7;
			&:last-child {
				border-right: none;
			}
		
		}
	}
	.content-list {
		position: relative;
		padding: 0.1rem 0.15rem;
		border-bottom: 1px solid #e2eaec;
	}
	.main-title, .main-add {
		margin: 0;
		color: #999;
		font-size: 0.14rem;
	}
	.main-title:before {
		@include icon(-0.3rem);
		margin-right: 0.05rem;
	}
	.main-add:before {
		@include icon(-0.02rem);
	}
	.main-date {
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
		padding-left: 3vw;
		padding-right: 1rem;
		font-size: 0.16rem;
		color: #000;
		margin: 0.1rem;
	}
	.main-price {
		@include half;
		position: absolute;
		font-size: 0.16rem;
		color: red;
		padding-right: 0.2rem;
		padding-left: 0;
		right: .1rem;
		&:after {
			@include icon(-0.59rem);
			margin-left: 0.10rem;
		}
	}
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0.45rem;
	padding: 0.05rem 0;
	#{$bg}: #f8fafb;
	border-top: 1px solid #e2eaec;
	text-align: center;
	overflow: hidden;
}
	footer button {
		display: inline-block;
		border: 0;
		outline: 0;
		width: 0.5rem;
		color: #999;
		#{$bg}: transparent;
		vertical-align: middle;
		cursor: pointer;
	}
	.revise {
		width: 0.45rem;
		height: 0.45rem;
		#{$bg}: $color;
		border-radius: 100%;
		overflow: hidden;
		margin: 0 15%;
	}
	.home .icon {
		display: block;
       
		@include bg(icon, 0.4rem, 0.3rem, 0.25rem);
		margin: 0 auto;
		#{$bg}-position: -4px -90px;
	}
	.revise .icon {
		display: block;
		@include bg(icon, 0.4rem, 0.45rem, 0.45rem);
		#{$bg}-position: 5px -156px;
		margin: 0 auto;
	}
	.user .icon {
		display: block;
		@include bg(icon, 0.4rem, 0.3rem, 0.25rem);
		#{$bg}-position: -4px -127px;
		margin: 0 auto;
	}